<template>
  <div class="index">
    <div class="vod_wrap_live">
      <div class="vod_bg">
        <div class="vod_wrap_top_title">
          研学直播
        </div>
        <div class="vod_box_wrap">
          <div class="prev" @click="changeSwipe2('up')">
            <img src="../assets/images/prev.png" alt="">
          </div>
          <div class="vod_box">
            <van-swipe :autoplay="3000" :show-indicators="false" ref="swiper2" @change="onChange2">
              <van-swipe-item v-for="(item, index) in zbList" :key="index" @click="bindLive(item.url)">
                <img class="img" v-lazy="item.image" />
                <div class="name">{{ item.mc }}</div>
                <i class="play"></i>
              </van-swipe-item>
            </van-swipe>
          </div>
          <div class="next" @click="changeSwipe2('down')">
            <img src="../assets/images/next.png" alt="">
          </div>
        </div>
      </div>
    </div>

    <div class="drama_wrap">
      <div class="drama_wrap_bg">
        <div class="drama_wrap_top_title">
          戏剧项目展示
        </div>
        <div class="drama_list">
          <div class="drama_item" v-for="item in itemList" :key="item.fyclassdataid" @click="xjxm(item.fyclassdataid)">
            <img :src="item.picurl" alt="">
            <div class="name">{{ item.xmmc }}</div>
          </div>
        </div>
      </div>
      <div class="more" @click="onMore">
        查看更多
      </div>
    </div>

    <div class="watch_me">
      <div class="watch_me_bg">
        <div class="watch_me_title">
          浙江非遗看我的
        </div>
        <div class="watch_me_list">
          <div class="watch_me_item" v-for="item in kwdList" :key="item.fyclassdataid"
            @click="onVideo(item.fyclassdataid)">
            <img :src="item.picurl" alt="">
            <div class="name">{{ item.mc }}</div>
          </div>
        </div>
      </div>
      <div class="more" @click="fyList">
        查看更多
      </div>
    </div>

    <div class="vod_wrap">
      <div class="vod_bg">
        <div class="vod_wrap_top_title">
          戏剧项目点播
        </div>
        <div class="vod_box_wrap">
          <div class="prev" @click="changeSwipe('up')">
            <img src="../assets/images/prev.png" alt="">
          </div>
          <div class="vod_box">
            <van-swipe :autoplay="3000" :show-indicators="false" ref="swiper" @change="onChange">
              <van-swipe-item v-for="(item, index) in xjList" :key="index" @click="onxjxm(item.fyclassdataid)">
                <img class="img" v-lazy="item.picurl" />
                <div class="name">{{ item.dataname }}</div>
                <i class="play"></i>
              </van-swipe-item>
            </van-swipe>
          </div>
          <div class="next" @click="changeSwipe('down')">
            <img src="../assets/images/next.png" alt="">
          </div>
        </div>
      </div>
      <div class="more" @click="xjxmList">
        查看更多
      </div>
    </div>

    <footer>
      <div>浙江省非物质文化遗产保护中心</div>
      <div>（浙江省非物质文化遗产馆）</div>
    </footer>
  </div>
</template>

<script>
import Vue from 'vue';
import { Lazyload } from 'vant';
Vue.use(Lazyload);
import { getxmList, getkwd, getxjdb, getzb } from "@/api/api.js";
export default {
  name: '',
  data() {
    return {
      videoList: [
        {
          url: require('../assets/images/large.png'),
          name: '戏剧名称11'
        },
        {
          url: require('../assets/images/ship.png'),
          name: '戏剧名称22'
        },
      ],
      index: 0,
      index: 2,
      itemList: [],
      kwdList: [],
      xjList: [],
      zbList: [],
    };
  },
  created() {
    this.xmLst()
    this.kwd()
    this.xjdb()
    this.live()
  },
  mounted() {

  },
  methods: {
    onxjxm(id) {
      this.$router.push({ path: "/xjvideo", query: { id: id } });
    },
    xjxmList(){
      this.$router.push({ path: "/xjxmList" });
    },
    fyList() {
      this.$router.push({ path: "/fyVideoList" });
    },
    bindLive(url) {
      this.$router.push({ path: "/live", query: { url: url } });
    },
    async live() {
      let res = await getzb({})
      console.log('直播==', res);
      if (res.code == 200) {
        this.zbList = res.data
      }
    },
    onVideo(id) {
      this.$router.push({ path: "/video", query: { id: id } });
    },
    xjxm(id) {
      this.$router.push({ path: "/goodsXq", query: { id: id } });
    },
    onMore() {
      this.$router.push({ path: "/dramaList" });
    },
    async xjdb() {
      let res = await getxjdb({
        pageIndex: 1,
        pageSize: 5
      })
      if (res.code == 200) {
        this.xjList = res.data.list
      }
    },
    async kwd() {
      let res = await getkwd({
        pageIndex: 1,
        pageSize: 6
      })
      if (res.code == 200) {
        this.kwdList = res.data.list
      }
    },
    async xmLst() {
      let res = await getxmList({
        pageIndex: 1,
        pageSize: 3
      })
      if (res.code == 200) {
        this.itemList = res.data.list
      }
    },
    onChange(index) {
      // console.log('当前 Swipe 索引：' + index);
      this.index = index
    },
    onChange2(index) {
      // console.log('当前 Swipe 索引：' + index);
      this.index2 = index
    },
    changeSwipe(type) {
      console.log('type==', type);
      if (type == 'up') {
        this.index -= 1;
      } else if (type == 'down') {
        this.index += 1;
      }
      this.$refs.swiper.swipeTo(this.index);
    },
    changeSwipe2(type) {
      console.log('type==', type);
      if (type == 'up') {
        this.index2 -= 1;
      } else if (type == 'down') {
        this.index2 += 1;
      }
      this.$refs.swiper2.swipeTo(this.index2);
    },
  },
}
</script>
<style scoped lang="scss">
.index {
  width: 100%;
  height: 207.6875rem;
  background: url('../assets/images/bg.png') no-repeat;
  background-size: 100% 100%;

  .vod_wrap_live {
    padding-top: 43rem;

    .vod_bg {
      width: 22.4375rem;
      height: 19.5rem;
      background: url('../assets/images/drama_2.png') no-repeat;
      background-size: 100% 100%;
      margin: 0 auto;
      position: relative;

      .vod_wrap_top_title {
        font-size: 1.25rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 2.1875rem;
        letter-spacing: .0625rem;
        // -webkit-text-stroke: .0625rem #000000;
        // text-stroke: .0625rem #000000;
        text-align: center;
      }

      .vod_box_wrap {
        height: 9.5rem;
        display: flex;
        align-items: center;
        padding-top: 3.5625rem;
        margin: 0 20px;

        .prev img,
        .next img {
          width: .875rem;
          height: 1.5rem;
        }

        .vod_box {
          width: 15.625rem;
          height: 9.5rem;
          border-radius: .5rem;

          margin: 0 auto;

          .img {
            width: 100%;
            height: 9.5rem;
            border-radius: .5rem;
            object-fit: cover;
          }

          .name {
            font-size: 1rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
            line-height: 1.375rem;
            padding-top: .8125rem;
            text-align: center;
          }

          .play {
            width: 3.0625rem;
            height: 3.0625rem;
            background: url('../assets/images/play.png') no-repeat;
            background-size: 100% 100%;
            display: block;
            position: absolute;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            top: 3.125rem;
          }
        }
      }
    }
  }

  .drama_wrap {
    margin-top: 3.125rem;

    .drama_wrap_bg {
      width: 100%;
      height: 43.0625rem;
      background: url('../assets/images/drama_1.png') no-repeat;
      background-size: 100% 100%;

      .drama_wrap_top_title {
        font-size: 1.25rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 2.1875rem;
        letter-spacing: .0625rem;
        // -webkit-text-stroke: .0625rem #000000;
        // text-stroke: .0625rem #000000;
        text-align: center;
      }

      .drama_list {
        margin-top: 2.375rem;

        .drama_item {
          text-align: center;
          padding-bottom: 1.375rem;

          img {
            width: 18.125rem;
            height: 8.75rem;
            border-radius: .5rem;
            object-fit: cover;
          }

          .name {
            font-size: 1rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
            line-height: 1.375rem;
            padding-top: .9375rem;
          }
        }
      }
    }

    .more {
      width: 6.5rem;
      height: 1.75rem;
      border-radius: 212px;
      border: 1px solid #157459;
      font-size: .875rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #157459;
      line-height: 1.75rem;
      text-align: center;
      margin: 2.5rem auto 0 auto;
    }
  }

  .watch_me {
    margin-top: 3.375rem;

    .watch_me_bg {
      width: 100%;
      height: 46.875rem;
      background: url('../assets/images/drama_1.png') no-repeat;
      background-size: 100% 100%;

      .watch_me_title {
        font-size: 1.25rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 2.1875rem;
        letter-spacing: .0625rem;
        // -webkit-text-stroke: .0625rem #000000;
        // text-stroke: .0625rem #000000;
        text-align: center;
      }

      .watch_me_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        margin-top: 1.875rem;

        .watch_me_item {
          width: 9.375rem;
          margin-bottom: .625rem;

          img {
            width: 9.375rem;
            height: 11.5625rem;
            border-radius: .5rem;
            object-fit: cover;
          }

          .name {
            font-size: 1rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
            line-height: 1.375rem;
            text-align: center;
          }
        }
      }
    }

    .more {
      width: 6.5rem;
      height: 1.75rem;
      border-radius: 212px;
      border: 1px solid #157459;
      font-size: 0.875rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #157459;
      line-height: 1.75rem;
      text-align: center;
      margin: 1.5rem auto 0 auto;
    }
  }

  .vod_wrap {
    margin-top: 4.375rem;

    .vod_bg {
      width: 22.4375rem;
      height: 19.5rem;
      background: url('../assets/images/drama_2.png') no-repeat;
      background-size: 100% 100%;
      margin: 0 auto;
      position: relative;

      .vod_wrap_top_title {
        font-size: 1.25rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 2.1875rem;
        letter-spacing: .0625rem;
        // -webkit-text-stroke: .0625rem #000000;
        // text-stroke: .0625rem #000000;
        text-align: center;
      }

      .vod_box_wrap {
        height: 9.5rem;
        display: flex;
        align-items: center;
        padding-top: 3.5625rem;
        margin: 0 20px;

        .prev img,
        .next img {
          width: .875rem;
          height: 1.5rem;
        }

        .vod_box {
          width: 15.625rem;
          height: 9.5rem;
          border-radius: .5rem;

          margin: 0 auto;

          .img {
            width: 100%;
            height: 9.5rem;
            border-radius: .5rem;
            object-fit: cover;
          }

          .name {
            font-size: 1rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
            line-height: 1.375rem;
            padding-top: .8125rem;
            text-align: center;
          }

          .play {
            width: 3.0625rem;
            height: 3.0625rem;
            background: url('../assets/images/play.png') no-repeat;
            background-size: 100% 100%;
            display: block;
            position: absolute;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            top: 3.125rem;
          }
        }
      }
    }

    .more {
      width: 6.5rem;
      height: 1.75rem;
      border-radius: 212px;
      border: 1px solid #157459;
      font-size: 0.875rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #157459;
      line-height: 1.75rem;
      text-align: center;
      margin: 1.5rem auto 0 auto;
    }
  }

  footer {
    font-size: .75rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 1.4375rem;
    text-align: center;
    padding-top: 3.8125rem;
  }
}</style>